Skip to main content

platinum_default

The onboarding config accepts a platinum step type to support bundle post-purchase steps. The template accepts a platinumType to show the type of the step. The default type is platinum_default:

  • It has a two-screen page.
  • The first screen shows the list of the apps icons.
  • The second screen shows the features.

[!NOTE] Lune is currently supported for that template. You can write this step, and the default design should take over:

{
      "type": "platinum",
      "stepId": "platinum_lune",
      "backgroundColor": "#02039F",
      "platinumType": "platinum_default"
}

The default plan code for Lune is sleep-subs-bimonthly-normal-bundleapps-39, but you can override it by adding a new planCode to the step.

To add the step to other apps, you’ll need to update the config to reflect the changes needed (e.g., title, features, etc).

[!IMPORTANT] To support another app without having to override many values, you can ask the frontend team for support in code (if it hasn’t been supported by default yet)

KeyNotes
platinumTypeplatinum_default
planCode
title
titleColor
backgroundColor
textColor
ctaText
ctaTextColor
ctaBackgroundColor
ctaHoverBackgroundColor
skipCtaAn object that accepts text and textColor
"skipCta": {
    "text": "Skip offer",
    "textColor": "#FFA133"
}
featuresAn array of objects for adding the apps styles:
"features": [
    {
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/img_icon_fabulous.png",
      "title": "Fabulous",
      "subtitle": "Routines & habits",
      "titleColor": "white",
      "subtitleColor": "#D1CFFF",
      "backgroundColor": "#2D2DC7"
    },
    {
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/img_icon_clarify_icon.png",
      "title": "Clarify",
      "subtitle": "ADHD organizer",
      "titleColor": "white",
      "subtitleColor": "#D1CFFF",
      "backgroundColor": "#2D2DC7"
    },
    {
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/img_icon_lumiere.png",
      "title": "Lumiere",
      "subtitle": "Ease stress & anxiety",
      "titleColor": "white",
      "subtitleColor": "#D1CFFF",
      "backgroundColor": "#2D2DC7"
    },
    {
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/img_icon_shape.png",
      "title": "Shape",
      "subtitle": "Healthy eating journal",
      "titleColor": "white",
      "subtitleColor": "#D1CFFF",
      "backgroundColor": "#2D2DC7"
    },
    {
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/img_icon_elixir.png",
      "title": "Elixir",
      "subtitle": "Your purpose",
      "titleColor": "white",
      "subtitleColor": "#D1CFFF",
      "backgroundColor": "#2D2DC7"
    }
  ]
planBoxDetails   "planBoxDetails": {
    "title": "Try all apps with a {'{{'}TRIAL_IN_DAYS{{'}}'} day FREE trial",
    "titleColor": "white",
    "backgroundColor": "#FFF",
    "textColor": "#251C93",
    "subtitleColor": "#6262DD",
    "borderColor": "#FFE1D0",
    "secondaryColor": "#FF7121",
    "description": "See your transformation begin in just 2 weeks 🚀",
    "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/plan-timeline.png"
  }
bottomViewBackgroundColor
bottomViewBoxShadow
termsCheckbox"termsCheckbox": {
    "text": "I agree to the above terms of the auto-renewing subscription",
    "textColor": "#D6D6FF",
    "activeBackgroundColor": "#FFA133"
  }
termsBox "termsBox": {
    "text": "This is an auto-renewing subscription • If you don’t cancel during the {'{{'}TRIAL_IN_DAYS{{'}}'}-day introductory period, {'{{'}APP_NAME{{'}}'} will charge you {'{{'}PRICE{{'}}'} on {'{{'}POST_TRIAL_DATE{{'}}'} • After the introductory period, you will be charged automatically {'{{'}PRICE{{'}}'} every {'{{'}PERIOD_IN_MONTHS{{'}}'} months until you cancel • You can cancel at any time by changing your account settings via <a href=\"https://www.thefabulous.co\" style=\"color:#FFA133;\">thefabulous.co</a> • By purchasing a subscription, you agree to our <a href=\"https://www.thefabulous.co/terms.html\" style=\"color:#FFA133;\">Terms of Use</a> and confirm that you are over 18 years of age and acknowledge the <a href=\"https://www.thefabulous.co/terms.html#privacy\" style=\"color:#FFA133;\">Privacy Statement</a>",
    "textColor": "#B2B2FF",
    "backgroundColor": "#000180"
  }
discountedPlanCodeOptional – used to show a discounted offer modal.
discountModalUsed to add the discounted offer styles (check the config below)
Note: To handle a discounted offer, the step needs to have discountedPlanCode code
bundleAppsStepThe config of the first screen on the step (more details below)

bundleAppsStep Coning​

KeyNotes
headerImageUrlThe image with the stars
title
subtitle
titleColor
subtitleColor
ctaText
ctaTextColor
ctaBackgroundColor
ctaHoverBackgroundColor
desktopBackgroundThese bg images are used as an overlay. Example:
'https://c.thefab.co/web-onboarding/fabulous/img_bg_overlay_family_plan_desktop.jpg'
tabletBackground
mobileBackground
appsThe list of apps to show:
"apps": [
    {
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/img_bundle_icon_fabulous.png",
      "iconUrlDesktop": "https://c.thefab.co/web-onboarding/fabulous/img_bundle_fabulous.png",
      "title": "Unlock Your Best Self",
      "content": "Transform your life with science-backed routines and habits, beautifully designed in <span style=\"font-weight: 700; color:white;\">Fabulous</span>.",
      "titleColor": "white",
      "contentColor": "#D1CFFF"
    },
    {
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/img_bundle_icon_clarify.png",
      "iconUrlDesktop": "https://c.thefab.co/web-onboarding/fabulous/img_bundle_clarify.png",
      "title": "Thrive with ADHD",
      "content": "The life you’ve always wanted, with the help of behavioral science integrated in <span style=\"font-weight: 700; color:white;\">Clarify</span>.",
      "titleColor": "white",
      "contentColor": "#D1CFFF"
    },
    {
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/img_bundle_icon_lumiere.png",
      "iconUrlDesktop": "https://c.thefab.co/web-onboarding/fabulous/img_bundle_lumiere.png",
      "title": "Goodbye anxiety",
      "content": "With <span style=\"font-weight: 700; color:white;\">Lumiere</span>, learn to be patient and kind to yourself as you work through anxiety.",
      "titleColor": "white",
      "contentColor": "#D1CFFF"
    },
    {
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/img_bundle_icon_shape.png",
      "iconUrlDesktop": "https://c.thefab.co/web-onboarding/fabulous/img_bundle_shape.png",
      "title": "Healthy eating",
      "content": "Boost your energy, immune system, and overall well-being through food you love with <span style=\"font-weight: 700; color:white;\">Shape</span>.",
      "titleColor": "white",
      "contentColor": "#D1CFFF"
    },
    {
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/img_bundle_icon_elixir.png",
      "iconUrlDesktop": "https://c.thefab.co/web-onboarding/fabulous/img_bundle_elixir.png",
      "title": "Your purpose",
      "content": "Discover what brings you fulfillment by aligning with your core beliefs through <span style=\"font-weight: 700; color:white;\">Elixir</span>.",
      "titleColor": "white",
      "contentColor": "#D1CFFF"
    }
  ]

discountModal Config​

KeyNotes
title
subtitle
footerText
textColor
overlayColor
backgroundColorThe modal background color (it’s white in the screenshot above)
ctaText
ctaTextColor
ctaBackgroundColor
ctaHoverBackgroundColor
useHTML
appsapps: [
      {
        iconUrl: 'https://c.thefab.co/web-onboarding/fabulous/icon/ic_bundle_clarify.svg',
        text: 'Thrive with ADHD',
      },
      {
        iconUrl: 'https://c.thefab.co/web-onboarding/fabulous/icon/ic_bundle_lumiere.svg',
        text: 'Goodbye anxiety',
      },
      {
        iconUrl: 'https://c.thefab.co/web-onboarding/fabulous/icon/bundle_shape.svg',
        text: 'Healthy eating',
      },
      {
        iconUrl: 'https://c.thefab.co/web-onboarding/fabulous/icon/ic_fab_bundle_elixir.svg',
        text: 'Your purpose',
      },
    ]
firstBar firstBar: {
      text: 'Lune + Burnout Recovery Kit',
      iconUrl: 'https://c.thefab.co/web-onboarding/fabulous/img_bundle_popup_mascot.png',
      backgroundColor: 'linear-gradient(90deg, #7C4DDA 0%, #B7D4FF 100%)',
      backgroundImage: 'https://c.thefab.co/web-onboarding/fabulous/img_bar1_bg.png',
      textColor: 'white',
  }
secondBarsecondBar: {
      text: 'Lune Premium Membership',
      activeBackgroundColor: 'linear-gradient(90deg, #FF7462 0%, #FFA3C0 49.4%, #DAC1FF 100%)',
      backgroundColor: '#FFF3EB',
      textColor: 'white',
}
Lune's default config
{
  "platinumType": "platinum_default",
  "planCode": "sleep-subs-bimonthly-normal-bundleapps-39",
  "backgroundColor": "#02039F",
  "textColor": "white",
  "title": "Your burnout recovery kit includes",
  "titleColor": "white",
  "ctaText": "Start your free trial",
  "ctaTextColor": "white",
  "ctaBackgroundColor": "linear-gradient(88deg, #FFB236 0%, #F61A92 100%)",
  "bottomViewBackgroundColor": "#FFF",
  "features": [
    {
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/img_icon_fabulous.png",
      "title": "Fabulous",
      "subtitle": "Routines & habits",
      "titleColor": "white",
      "subtitleColor": "#D1CFFF",
      "backgroundColor": "#2D2DC7"
    },
    {
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/img_icon_clarify_icon.png",
      "title": "Clarify",
      "subtitle": "ADHD organizer",
      "titleColor": "white",
      "subtitleColor": "#D1CFFF",
      "backgroundColor": "#2D2DC7"
    },
    {
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/img_icon_lumiere.png",
      "title": "Lumiere",
      "subtitle": "Ease stress & anxiety",
      "titleColor": "white",
      "subtitleColor": "#D1CFFF",
      "backgroundColor": "#2D2DC7"
    },
    {
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/img_icon_shape.png",
      "title": "Shape",
      "subtitle": "Healthy eating journal",
      "titleColor": "white",
      "subtitleColor": "#D1CFFF",
      "backgroundColor": "#2D2DC7"
    },
    {
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/img_icon_elixir.png",
      "title": "Elixir",
      "subtitle": "Your purpose",
      "titleColor": "white",
      "subtitleColor": "#D1CFFF",
      "backgroundColor": "#2D2DC7"
    }
  ],
  "ctaHoverBackgroundColor": "linear-gradient(rgba(35, 15, 153, 0.1), rgba(35, 15, 153, 0.1)), linear-gradient(88deg, #FFB236 0%, #F61A92 100%)",
  "planBoxDetails": {
    "title": "Try all apps with a {{TRIAL_IN_DAYS}} day FREE trial",
    "titleColor": "white",
    "backgroundColor": "#FFF",
    "textColor": "#251C93",
    "subtitleColor": "#6262DD",
    "borderColor": "#FFE1D0",
    "secondaryColor": "#FF7121",
    "description": "See your transformation begin in just 2 weeks 🚀",
    "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/plan-timeline.png"
  },
  "skipCta": {
    "text": "Skip offer",
    "textColor": "#FFA133"
  },
  "discountModal": {
    "title": "Did you know?",
    "subtitle": "Lune members who start their program with the burnout recovery kit are 40% more likely to achieve their goals within 30 days.",
    "footerText": "We are offering an additional <span style=\"color: #FF634E; font-weight:800;\">25% off</span> this burnout recovery kit, just for you.",
    "textColor": "#251C93",
    "overlayColor": "rgba(21, 21, 39, 0.60)",
    "backgroundColor": "white",
    "ctaText": "Continue",
    "ctaTextColor": "white",
    "ctaBackgroundColor": "#3428C6",
    "ctaHoverBackgroundColor": "#251C93",
    "closeIconColor": "#B8B3EB",
    "useHTML": true,
    "apps": [
      {
        "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_bundle_clarify.svg",
        "text": "Thrive with ADHD"
      },
      {
        "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_bundle_lumiere.svg",
        "text": "Goodbye anxiety"
      },
      {
        "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/bundle_shape.svg",
        "text": "Healthy eating"
      },
      {
        "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_fab_bundle_elixir.svg",
        "text": "Your purpose"
      }
    ],
    "firstBar": {
      "text": "Lune + Burnout Recovery Kit",
      "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/img_bundle_popup_mascot.png",
      "backgroundColor": "linear-gradient(90deg, #7C4DDA 0%, #B7D4FF 100%)",
      "backgroundImage": "https://c.thefab.co/web-onboarding/fabulous/img_bar1_bg.png",
      "textColor": "white"
    },
    "secondBar": {
      "text": "Lune Premium Membership",
      "activeBackgroundColor": "linear-gradient(90deg, #FF7462 0%, #FFA3C0 49.4%, #DAC1FF 100%)",
      "backgroundColor": "#FFF3EB",
      "textColor": "white"
    }
  },
  "termsCheckbox": {
    "text": "I agree to the above terms of the auto-renewing subscription",
    "textColor": "#D6D6FF",
    "activeBackgroundColor": "#FFA133"
  },
  "bottomViewBoxShadow": "0px 0px 15px 0px rgba(0, 0, 0, 0.30)",
  "termsBox": {
    "text": "This is an auto-renewing subscription • If you don’t cancel during the {{TRIAL_IN_DAYS}}-day introductory period, {{APP_NAME}} will charge you {{PRICE}} on {{POST_TRIAL_DATE}} • After the introductory period, you will be charged automatically {{PRICE}} every {{PERIOD_IN_MONTHS}} months until you cancel • You can cancel at any time by changing your account settings via <a href=\"https://www.thefabulous.co\" style=\"color:#FFA133;\">thefabulous.co</a> • By purchasing a subscription, you agree to our <a href=\"https://www.thefabulous.co/terms.html\" style=\"color:#FFA133;\">Terms of Use</a> and confirm that you are over 18 years of age and acknowledge the <a href=\"https://www.thefabulous.co/terms.html#privacy\" style=\"color:#FFA133;\">Privacy Statement</a>",
    "textColor": "#B2B2FF",
    "backgroundColor": "#000180"
  },
  "bundleAppsStep": {
    "headerImageUrl": "https://c.thefab.co/web-onboarding/fabulous/sparks-icon.png",
    "ctaHoverBackgroundColor": "linear-gradient(rgba(35, 15, 153, 0.1), rgba(35, 15, 153, 0.1)), linear-gradient(88deg, #FFB236 0%, #F61A92 100%)",
    "title": "Upgrade your subscription with",
    "subtitle": "Burnout Recovery Kit",
    "titleColor": "#D9D9FF",
    "subtitleColor": "white",
    "ctaBackgroundColor": "linear-gradient(88deg, #FFB236 0%, #F61A92 100%)",
    "bottomViewBackgroundColor": "#FFF",
    "ctaText": "Continue",
    "ctaTextColor": "white",
    "apps": [
      {
        "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/img_bundle_icon_fabulous.png",
        "iconUrlDesktop": "https://c.thefab.co/web-onboarding/fabulous/img_bundle_fabulous.png",
        "title": "Unlock Your Best Self",
        "content": "Transform your life with science-backed routines and habits, beautifully designed in <span style=\"font-weight: 700; color:white;\">Fabulous</span>.",
        "titleColor": "white",
        "contentColor": "#D1CFFF"
      },
      {
        "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/img_bundle_icon_clarify.png",
        "iconUrlDesktop": "https://c.thefab.co/web-onboarding/fabulous/img_bundle_clarify.png",
        "title": "Thrive with ADHD",
        "content": "The life you’ve always wanted, with the help of behavioral science integrated in <span style=\"font-weight: 700; color:white;\">Clarify</span>.",
        "titleColor": "white",
        "contentColor": "#D1CFFF"
      },
      {
        "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/img_bundle_icon_lumiere.png",
        "iconUrlDesktop": "https://c.thefab.co/web-onboarding/fabulous/img_bundle_lumiere.png",
        "title": "Goodbye anxiety",
        "content": "With <span style=\"font-weight: 700; color:white;\">Lumiere</span>, learn to be patient and kind to yourself as you work through anxiety.",
        "titleColor": "white",
        "contentColor": "#D1CFFF"
      },
      {
        "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/img_bundle_icon_shape.png",
        "iconUrlDesktop": "https://c.thefab.co/web-onboarding/fabulous/img_bundle_shape.png",
        "title": "Healthy eating",
        "content": "Boost your energy, immune system, and overall well-being through food you love with <span style=\"font-weight: 700; color:white;\">Shape</span>.",
        "titleColor": "white",
        "contentColor": "#D1CFFF"
      },
      {
        "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/img_bundle_icon_elixir.png",
        "iconUrlDesktop": "https://c.thefab.co/web-onboarding/fabulous/img_bundle_elixir.png",
        "title": "Your purpose",
        "content": "Discover what brings you fulfillment by aligning with your core beliefs through <span style=\"font-weight: 700; color:white;\">Elixir</span>.",
        "titleColor": "white",
        "contentColor": "#D1CFFF"
      }
    ],
    "desktopBackground": "https://c.thefab.co/web-onboarding/fabulous/img_bg_overlay_family_plan_desktop.jpg",
    "tabletBackground": "https://c.thefab.co/web-onboarding/fabulous/img_bg_overlay_family_plan_tablet.jpg",
    "mobileBackground": "https://c.thefab.co/web-onboarding/fabulous/img_bg_overlay_family_plan_mobile.jpg"
  }
}